<template>
  <!-- 主要内容 -->
  <div class="work">
    <div class="work-data">
      <p class="data-tt">今日销售额：</p>
      <span class="data-num" v-if="workInfo.today">{{workInfo.today}}</span>
    </div>
    <div class="work-data">
      <p class="data-tt">总销售额：&nbsp;&nbsp;&nbsp;</p>
      <span class="data-num" v-if="workInfo.total">{{workInfo.total}}</span>
      <p class="data-avg">日均销售额 <span v-if="workInfo.day">￥{{workInfo.day}}</span></p>
    </div>
    <div class="work-trend">
      <p>销售额趋势</p>
      <div class="echart" id="mychart" :style="myChartStyle" v-if="workInfo.trend"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name:'Work',
  props: ['workInfo'],
  data() {
    return {
      //横坐标
      xData: [],
      //数据
      yData: [],
      //柱状图样式
      myChartStyle: { position: 'absolute',left: '3.8vw',bottom: '11vh',width: "100%", height: "60vh" } 
    }
  },  
  mounted() {
    //获取工作台数据
    this.$store.dispatch('getWorkInfo');
    this.getData();
    this.initEcharts();
  },
  methods: {
    //数据处理
    getData() {
      let trend = this.workInfo.trend || false;
      if(trend) {
        for(var i = 0; i < 12; i++) {
          this.xData[i] = trend[i].month;
          this.yData[i] = trend[i].total;
        }
      }
    },
    //柱状图
    initEcharts() {
      const option = {
        grid:{
          left:"11.2%",
        },
        xAxis: {
          data: this.xData
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
    }
  },
}
</script>

<style scoped>
  .work {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }

  .work .work-data {
    box-sizing: border-box;
    width: 100%;
    height: 10vh;
    padding-left: 3vw;
    padding-top: 1.6vh;
    margin-bottom: 1.6vh;
    text-align: left;
    /*  行内块元素顶部对齐vertical-align: top;*/
    border-radius: 4vw;
    background-color: #fff;
  }

  .work .data-tt {
    display: inline-block;
    padding-right: 10vw;
    font-size: 4vw;
    color: #000;
    vertical-align:middle;
  }

  .work .data-num {
    font-size: 7vw;
    color: #409EFF;
    vertical-align:middle;
  }

  .work .data-avg {
    padding-top: .1vh;
    color: #5A5A5A;
    font-size: 3.2vw;
  }

  .work .data-avg>span {
    color: #409EFF;
  }

  .work .work-trend {
    box-sizing: border-box;
    padding-left: 3vw;
    padding-top: 1.6vh;
    width: 100%;
    height: 50vh;
    border-radius: 4vw;
    background-color: #fff;
  }
  .work .work-trend>p {
    font-size: 4vw;
    font-weight: 700;
  }

</style>